<template>
  <div id="gsMap" class="city-map" :style="styleComp"></div>

  <n-modal v-model:show="showModal">
    <div class="detail-popup" @click="showModal = false"></div>
  </n-modal>
</template>

<script setup lang="ts">
import {defineComponent, onMounted, computed, ref, watch, nextTick, onBeforeUnmount} from 'vue';
import {HomeService} from '@/views/home/homeService';

let indoor: any = null;
const showModal = ref(false);
const styleComp = computed(() => {
  const left = HomeService.cityLeftIsExpand.value;
  const right = HomeService.cityRightIsExpand.value;
  if (!left && !right) return 'left: 85px; width: 3670px';
  if (!left) return 'left: 85px; width: 2520px';
  if (!right) return 'right: 85px; width: 2520px';
  return '';
});

function initMap() {
  indoor = new IndoorMap({
    target: 'gsMap', //绑定的标签位置
    center: [13055328.57050052, 3710405.8122497858], //设置地图初始中心位置（百度墨卡托BD09MC）
    zoom: 18, //设置地图初始层级
    tile: false, //底图是否可见
    tileURL: window.CONST_map_vector_baidu,
    onLoad: (sender: any) => {
      // 地图构建完成事件
      console.log('IndoorMap 构建完成！');
      addMarks(sender);
    },
  });
  const pMap = window.GSMap.Plugin.new_PMap_ex({
    forceRenderType: 'WebGL',
    mapMain: indoor,
    showLCInfo: false
  });
  indoor.BindSynchronousDo(pMap);
  //初始加载第一个样式
  pMap.setMapStyle(window.GSMap.Plugin.BaiDu.PMapStyleArray[4]);

  indoor.onNewMarkSelected = () => {
    showModal.value = true;
  };
}

function addMarks(indoor: any) {
  //
  // 添加默认点
  //
  indoor.addNewMark(
      {name: '清华大学公共安全研究院', x: 13055328.57050052, y: 3710405.8122497858}, //绑定数据
      'x',
      'y',
      undefined,
      undefined
  );
  indoor.addNewMark(
      {name: '三号楼', x: 13055360.542381916, y: 3710384.297968333}, //绑定数据
      'x',
      'y',
      undefined,
      undefined
  );
}

watch(
    () => styleComp.value,
    () => {
      nextTick(() => {
        if(indoor) indoor.updateSize()
      });
    }
);

onMounted(() => {
  initMap();
});

onBeforeUnmount(() => {
  HomeService.cityLeftIsExpand.value = true;
  HomeService.cityRightIsExpand.value = true;
});

defineComponent({name: 'CityMap'});
</script>

<style scoped lang="scss">
.city-map {
  @apply w-[1400px] h-[900px] absolute top-0 left-[1220px];
}

.detail-popup {
  @apply w-[1550px] h-[966px];
  background: url('../assets/detail-popup.png') no-repeat center;
}
</style>
